<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拉拉货物流有限公司</title>
		<meta name="keywords" content="拉拉货物流有限公司,汕头物流配送,汕头物流,汕头物流货运,汕头货运,全国货运,厦门物流配送,深圳物流配送,广州物流配送,物流配送,物流货运,货运配送" />
	    <meta name="description" content="拉拉货物流有限公司是一家承接全国各地门到门配送业务的专业第三方物流，为企业量身定做仓储、配送物流方案，针对大小客户配备专业项目小组进行专人专车对接。" />
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <link rel="stylesheet" href="css/amazeui.min.css" type="text/css" />
	    <link rel="stylesheet" href="css/style.css" type="text/css" />
	    <script type="text/javascript" src="js/jquery.min.js" ></script>
	    <script type="text/javascript" src="js/amazeui.min.js" ></script>
		  <script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script> 
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tr1cFgHnr57lDma8FskVQHz7aNWFD03v"></script>
	<style type="text/css">
	    body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style> 
	
	</head>
	<body class="bgcolor">
		<header data-am-widget="header" class="am-header am-header-default header-white">
			<div class="am-header-left am-header-nav">
		        <a href="javascript:history.back()" class=""><i class="am-icon-chevron-left"></i></a>
	        </div>
	        <h1 class="am-header-title">添加运输路线</h1>
        </header>
        <div class="jl"></div>
		<div class="content-block" id="r-result">
            <i class="iconfont" style="color: #008b32;">&#xe601;</i>
			<input type="text" id="suggestId" size="20"  style="width:80%;" placeholder="请输入起点" />
	    	</div>
			<div class="content-block" id="r-result">
			<i class="iconfont" style="color: #e06803;">&#xe600;</i>
			<input type="text" id="suggestId2" size="20" value="" style="width:80%;" placeholder="请输入终点" />
		</div> 
		 <div id="allmap" style="width: 400px;height: 300px;"></div>
		<div class="content-block" >
			<input type="text" id="juli" size="20"  style="width:80%;display: none;" readonly="readonly" />
		</div> 
		<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		<button class="save" type="button" id="tianjia">添加</button>
		<script src="js/LAreaData1.js"></script>
		<script src="js/LAreaData2.js"></script>
		<script src="js/LArea.js"></script>
		<script>
		//var area1 = new LArea();
		/* area1.init({
			'trigger': '#demo1', 
			'valueTo': '#value1', 
			'keys': {
				id: 'id',
				name: 'name'
			}, 
			'type': 1, 
			'data': LAreaData 
		});
		area1.value=[1,13,3];
		var area2 = new LArea();
		area2.init({
			'trigger': '#demo2',
			'valueTo': '#value2',
			'keys': {
				id: 'value',
				name: 'text'
			},
			'type': 2,
			'data': [provs_data, citys_data, dists_data]
		}); */
		// 百度地图API功能
		var p1=0
		var p2=0
		var p3=0
		var p4=0
		var distance=0
		
			
		var url=JSON.parse(sessionStorage.getItem("url"))
		function G(id) {
		    return document.getElementById(id);
		}
		
		var map = new BMap.Map("allmap");
		map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
		var myDrag = new BMapLib.RectangleZoom(map, {
		    followText: "拖拽鼠标进行操作"
		});
		myDrag.open();  //开启拉框放大
		// myDrag.close();  //关闭拉框放大
		
		map.centerAndZoom("四川眉山",19);   // 初始化地图,设置城市和地图级别。
		
		var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		    {"input" : "suggestId"
		    ,"location" : map
		});
		var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象2
		    {"input" : "suggestId2"
		    ,"location" : map
		});
		
		ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
		var str = "";
		    var _value = e.fromitem.value;
		    var value = "";
		    if (e.fromitem.index > -1) {
		        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }    
		    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		    
		    value = "";
		    if (e.toitem.index > -1) {
		        _value = e.toitem.value;
		        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }    
		    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		    G("searchResultPanel").innerHTML = str;
		});
		ac2.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
		var str = "";
		    var _value = e.fromitem.value;
		    var value = "";
		    if (e.fromitem.index > -1) {
		        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }    
		    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		    
		    value = "";
		    if (e.toitem.index > -1) {
		        _value = e.toitem.value;
		        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }    
		    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		    G("searchResultPanel").innerHTML = str;
		});
		
		
		var myValue;
		ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
		
		var _value = e.item.value;
		    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		    setPlace();
		});
		ac2.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
		
		var _value = e.item.value;
		    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		    setPlace2();
		});
		
		function setPlace(){
		    map.clearOverlays();    //清除地图上所有覆盖物
		    function myFun(){
		        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		        p1=pp.lng;
				p2=pp.lat;
				console.log('经度：'+pp.lng, '纬度：'+pp.lat);
		        map.centerAndZoom(pp, 18);
		        map.addOverlay(new BMap.Marker(pp));    //添加标注
		    }
		    var local = new BMap.LocalSearch(map, { //智能搜索
		      onSearchComplete: myFun
		    });
		    local.search(myValue);
		};
		function setPlace2(){
		    map.clearOverlays();    //清除地图上所有覆盖物
		    function myFun(){
		        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		        console.log('经度：'+pp.lng, '纬度：'+pp.lat);
		        p3=pp.lng;
		        p4=pp.lat;
				map.centerAndZoom(pp, 18);
		        map.addOverlay(new BMap.Marker(pp));    //添加标注
				$.ajax({
					url:url+'/map/distance',
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					data:{
						'p1':p1,
						'p2':p2,
						'p3':p3,
						'p4':p4,
					},
					success:function(r){
						distance=r.data
						$("#juli").val('预估距离为：'+r.data+'m')
						$("#juli").css("display","block")
						
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
				
		    }
		    var local = new BMap.LocalSearch(map, { //智能搜索
		      onSearchComplete: myFun
		    });
		    local.search(myValue);
		}
		$("#tianjia").click(function(){
			sessionStorage.setItem("distance",distance)
			sessionStorage.setItem("qidian",$('#suggestId').val())
			sessionStorage.setItem("zhongdian",$('#suggestId2').val())
			location.href='orderAdd.html'
		})
	
		</script>
	</body>
</html>
